<template>
    <div class="content">
        <el-dialog title="物料选择" :visible.sync="visible" width="800px" @close="dialogCloseEvent">
            <el-form :inline="true" :model="formData" size="mini">
                <el-form-item label="物料编码">
                    <el-input v-model="formData.materialCode" placeholder="请输入物料编码"></el-input>
                </el-form-item>
                <el-form-item label="物料名称">
                    <el-input v-model="formData.materialName" placeholder="请输入物料名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchBtn">查询</el-button>
                    <el-button type="success" @click="resetBtn">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="dialogTable" @select="handlerTableSelect" @select-all="handlerTableSelect" height="500px">
                <el-table-column type="selection" label="" width=""></el-table-column>
                <el-table-column property="code" label="物料编码" width=""></el-table-column>
                <el-table-column property="name" label="物料名称" width=""></el-table-column>
                <el-table-column property="standard" label="物料规格"></el-table-column>
                <el-table-column property="typeName" label="物料类型"></el-table-column>
            </el-table>
            <div class="content-btns">
                <el-button type="primary" size="mini" class="btns-item" @click="cancelEvent">取消</el-button>
                <el-button type="success" size="mini" class="btns-item" @click="confirmEvent">确定</el-button>
            </div>
            <div class="content-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30,50,100,200]" :page-size="pageSize" background layout="prev, pager, next, sizes, jumper, total" size="mini" :total="total" class="pagination-style"></el-pagination>
            </div> 
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request';
export default {
    name:"Material",
    props:{
        visible:{
            type:Boolean,
            require:false,
            default:false
        }
    },
    data(){
        return {
            dialogTable:[],
            currentPage:1,
            pageSize:10,
            total:0,
            handlerSelected:[],
            formData:{
                materialName:"",
                materialCode:""
            }
        }
    },
    mounted(){
        this.reqMatrialList();
    },
    methods:{
        reqMatrialList(){
            const parameter = {pageNum:this.currentPage,pageSize:this.pageSize,name:this.formData.materialName,code:this.formData.materialCode};
            request({url:"/crm/order/material-list", method:"get", params:parameter })
            .then(response => {
                if(response.code === 200  && response.rows){
                    this.dialogTable = response.rows;
                    this.total = response.total;
                }
            }).catch(error => {
                this.$message({type:"error",message:"物料信息请求出错"});
            })
        },
        handleCurrentChange(value){
            this.currentPage = value;
            this.reqMatrialList();
        },
        handleSizeChange(value){
            this.pageSize = value;
            this.reqMatrialList();
        },
        handlerTableSelect(selection,row){
            this.handlerSelected = selection;
        },
        cancelEvent(){
            this.$emit("cancel");
        },
        confirmEvent(){
            this.$emit("confirm",this.handlerSelected);
        },
        dialogCloseEvent(){
            this.cancelEvent();
        },
        searchBtn(){
            const { materialCode,materialName } = this.formData;
            if(materialName === "" && materialCode === ""){
                this.$message({type:"error",message:"查询条件为空"});
                return;
            }
            this.reqMatrialList();
        },
        resetBtn(){
            this.currentPage = 1;
            this.pageSize = 10;
            this.formData.materialCode = "";
            this.formData.materialName = "";
            this.reqMatrialList();
        }
    }
}
</script>

<style lang='scss' scoped>
.content{
    width:100%;
    height: 100%;
    .content-btns{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .content-pagination{
        display: flex;
        justify-content: flex-end;
    }
}
.pagination-style{
    /* ::v-deep .el-select {
        width: 76px;
    }
    ::v-deep .el-input {
        width: 46px;
    } */
}
</style>